<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="title"
    :show-top="showTop"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
    :bg-color="dynamicColor"
  >
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'">
      <!-- <scroll-view
        class="scroll"
        scroll-with-animation
        scroll-y="true"
        style="height: 88vh"
        upper-threshold="60"
        @scroll="watchScrollWrapper"
      > -->
      <view class="combinatorial-info">
        <view class="left">
          <view class="title-box">
            <view class="title">{{ positionName }}</view>
            <view class="sub-title" @click="handleGoToPositionDetail">
              <text class="name">职业介绍</text>
              <u-icon name="arrow-right" color="#676D83" size="24"></u-icon>
            </view>
          </view>
          <view class="up">
            <text class="combinatorial-name"
              >选科组合: {{ currentSubject }}</text
            >
            <view class="change-btn" @click="handleChangeSubject">
              <image :src="edit" class="edit-img"></image>
              <text class="text">更换</text>
            </view>
          </view>
          <view class="down">
            职业匹配专业
            <text class="num">{{
              positionMatchDetail.professionNum || '-'
            }}</text>
            个, 开设院校
            <text class="num">{{ positionMatchDetail.collegeNum || '-' }}</text>
            所
          </view>
        </view>
        <!-- <view class="right">
          <view class="circle-progress">{{
            positionMatchDetail.subjectSelectMatchRate || '-'
          }}</view>
          <view class="text">职业匹配率</view>
        </view> -->
      </view>
      <view class="second-box">
        <view
          :class="
            currentComponent == item.component
              ? 'active-second-box-item'
              : 'second-box-item'
          "
          v-for="(item, index) in secondInfoList"
          :key="index"
          @click="changeCurrentType(item)"
        >
          <view class="name">
            {{ item.name }}
            <text v-if="item.number">({{ item.number }}个)</text>
          </view>
          <view class="per"
            >匹配率 <text class="num">{{ item.percent }}</text></view
          >
        </view>
      </view>
      <view class="third-box">
        <MatchCareerDevelopment
          v-show="currentComponent == 'MatchCareerDevelopment'"
          :chartData="chartData"
          :selectedSubjectList="selectedSubjectList"
        ></MatchCareerDevelopment>
        <MatchMajor
          v-show="currentComponent == 'MatchMajor'"
          :relSubject="relSubject"
          :positionId="positionId"
          :currentSubject="currentSubject"
          @getTotal="getTotal"
          @changeLevel="changeLevel"
        ></MatchMajor>
      </view>
      <!-- </scroll-view> -->
    </view>
    <u-popup v-model="showChooseSubjectPopup" mode="bottom" border-radius="14">
      <view class="choose-subject">
        <view class="choose-title">
          <view class="left">首选</view>
          <view class="right">选择一门学科</view>
        </view>
        <view class="choose-box">
          <view
            :class="
              item.id == currentFirstSubject.id
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            "
            v-for="(item, index) in firstSubject"
            :key="index"
            @click="selectFirstSubject(item)"
            >{{ item.name }}
          </view>
        </view>
        <view class="choose-title">
          <view class="left">再选</view>
          <view class="right">选择二门学科</view>
        </view>
        <view class="choose-box">
          <view
            :class="
              currentSecondSubjectList.includes(item)
                ? 'choose-box-item-selected'
                : 'choose-box-item'
            "
            v-for="(item, index) in secondSubject"
            :key="index"
            @click="selectSecondSubject(item)"
            >{{ item.name }}
          </view>
        </view>
        <view class="search-btn" @click="changeData">确定</view>
      </view>
    </u-popup>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>

<script>
import ShareMixin from '@/mixins/share';
import { getPositionTemplate } from '@/api/modules/career';
import LoginDialog from '@/components/LoginDialog';
import { throttle } from 'lodash';
import { getOneSubjectCombination, getMatchDetail } from '@/api/modules/gk';
import MatchCareerDevelopment from './MatchCareerDevelopment.vue';
import MatchMajor from './MatchMajor.vue';

export default {
  mixins: [ShareMixin],
  components: {
    MatchCareerDevelopment,
    MatchMajor,
    LoginDialog,
  },
  data() {
    return {
      personId: '',
      shareTitle: '震惊！同分数段的同学，靠选科组合提前锁定百万年薪赛道',
      sharePath:
        '/pagesSub/nationalCollegeEntranceExamination/positionMatchDetail/index',
      imageUrl:
        'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png',
      positionId: '',
      collegeNum: '',
      professionNum: '',
      relSubject: '',
      showTop: false,
      dynamicColor: 'transparent',
      gotoMyTabUrl: '',
      positionName: '前端工程师',
      edit: 'https://img3.job1001.com/ypMp/elan/images/saas/edit.png',
      firstSubject: [
        {
          name: '物理',
          id: '11',
        },
        {
          name: '历史',
          id: '12',
        },
      ],
      secondSubject: [
        {
          name: '化学',
          id: '14',
        },
        {
          name: '生物',
          id: '13',
        },
        {
          name: '政治',
          id: '15',
        },
        {
          name: '地理',
          id: '16',
        },
      ],
      currentFirstSubject: {}, // 当前选中的必选科目
      currentSecondSubjectList: [], // 选择两个科目的数据
      selectedSubjectList: [], // 全部选择的科目列表
      showChooseSubjectPopup: false,
      title: '职业匹配详情',
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      navHeight: getApp().globalData.navHeight,
      currentSubject: '',
      currentComponent: 'MatchCareerDevelopment',
      positionMatchDetail: {},
      secondInfoList: [
        {
          name: '选科职业发展',
          percent: '0',
          component: 'MatchCareerDevelopment',
        },
        {
          name: '本科匹配专业',
          number: '0',
          percent: '0',
          component: 'MatchMajor',
        },
      ],
      chartData: {},
    };
  },
  onLoad(opt) {
    this.positionId = opt.positionId; //职位id
    this.positionName = decodeURIComponent(opt.positionName); //职位名字
    this.currentSubject = decodeURIComponent(opt.subjectTypeDesc); //选中科目的名字，如 物理、化学、生物
    this.relSubject = decodeURIComponent(opt.relSubject); //选中科目的id，如 11,13,14
    this.professionNum = opt.professionNum; //匹配的专业数
    this.collegeNum = opt.collegeNum; //匹配的院校数
    this.getCurrentSubject();
    this.getMatchDetailFn();
    this.getOneSubjectCombinationFn();
    this.imageUrl =
      'https://img3.job1001.com/ypMp/elan/images/subjectSelect/subjectSelectSharePic.png'; //必须重新赋值
    this.sharePath = `/pagesSub/nationalCollegeEntranceExamination/positionMatchDetail/index?positionId=${this.positionId}&subjectTypeDesc=${this.currentSubject}&positionName=${this.positionName}&professionNum=${this.professionNum}&collegeNum=${this.collegeNum}&relSubject=${this.relSubject}`;
    if (!this.personId) {
      this.$refs.loginDialog.setVisibility(true);
      return;
    }
  },
  onPageScroll(e) {
    //滚动改变颜色
    this.showTop = e.scrollTop >= 60;
    if (this.showTop) {
      this.title = this.positionName;
      // this.dynamicColor = 'transparent';
      this.dynamicColor = '#cfe8fd';
    } else {
      this.title = '职业匹配详情';
      this.dynamicColor = '#cfe8fd';
    }
  },
  methods: {
    getTotal(totalMatchMajorNum, avgMatchRate) {
      this.secondInfoList[1].number = totalMatchMajorNum;
      this.secondInfoList[1].percent = avgMatchRate + '%';
    },
    changeLevel(text) {
      this.secondInfoList[1].name = text + '匹配专业';
    },

    watchScrollWrapper: throttle(function (e) {
      if (e.detail.scrollTop > 50) {
        this.title = this.positionName;
      } else {
        this.title = '职业匹配详情';
      }
    }, 100),
    getCurrentSubject() {
      const relSubjectArr = this.relSubject.split(',');
      const temp = [];
      relSubjectArr.forEach((item) => {
        if (item == '11') {
          this.currentFirstSubject = this.firstSubject[0];
        }
        if (item == '12') {
          this.currentFirstSubject = this.firstSubject[1];
        }
        if (item == '13') {
          temp.push(this.secondSubject[1]);
        }
        if (item == '14') {
          temp.push(this.secondSubject[0]);
        }
        if (item == '15') {
          temp.push(this.secondSubject[2]);
        }
        if (item == '16') {
          temp.push(this.secondSubject[3]);
        }
      });
      this.currentSecondSubjectList = temp;
    },
    getSelectedSubjectList() {
      const nameList = this.currentSubject.split('、');
      const idList = this.relSubject.split(',');
      const subjectList = [];
      nameList.forEach((name, index) => {
        const id = idList[index];
        subjectList.push({ name, id });
      });
      this.selectedSubjectList = subjectList;
    },
    selectFirstSubject(item) {
      this.currentFirstSubject = item;
    },
    selectSecondSubject(item) {
      if (this.currentSecondSubjectList.includes(item)) {
        return;
      } else {
        this.currentSecondSubjectList.push(item);
        if (this.currentSecondSubjectList.length > 2) {
          this.currentSecondSubjectList.shift();
        }
      }
    },
    changeData() {
      if (
        this.currentSecondSubjectList.length == 2 &&
        this.currentFirstSubject.id
      ) {
        this.showChooseSubjectPopup = false;
        this.$nextTick(() => {
          this.selectedSubjectList = [
            this.currentFirstSubject,
            ...this.currentSecondSubjectList,
          ];
          this.currentSubject = this.selectedSubjectList
            .map((item) => item.name)
            .join('、');
          this.relSubject = this.selectedSubjectList
            .map((item) => item.id)
            .join(',');
          this.getOneSubjectCombinationFn();
        });
      }
    },
    async getOneSubjectCombinationFn() {
      const params = {
        positionId: this.positionId,
        subjectCombination: this.relSubject,
      };
      const res = await getOneSubjectCombination(params);
      if (res.code === 200) {
        this.positionMatchDetail = res.data;
        this.positionMatchDetail.subjectSelectMatchRateNum = res.data
          .subjectSelectMatchRate
          ? parseFloat(res.data.subjectSelectMatchRate.replace('%', ''))
          : '-';
        this.secondInfoList[0].percent = res.data.developMatchRate;
      }
    },
    async getMatchDetailFn() {
      const params = {
        ylPositionId: this.positionId,
      };
      const res = await getMatchDetail(params);
      if (res.code == 200) {
        this.chartData = res.data;
        this.getSelectedSubjectList();
      }
    },
    handleChangeSubject() {
      this.showChooseSubjectPopup = true;
    },
    changeCurrentType(item) {
      this.currentComponent = item.component;
    },
    async handleGoToPositionDetail() {
      let params = `positionName=${this.positionName}&positionId=${this.positionId}`;
      //请求接口看是否走新页面
      const templateId = await this.getPositionTemplateFn(this.positionId);
      if (templateId == 6) {
        uni.navigateTo({
          url: `/pagesSub/careerNewPositionDictionary/positionDetail?${params}`,
        });
      } else {
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/positionDetail?${params}`,
        });
      }
    },
    async getPositionTemplateFn(positionId) {
      const res = await getPositionTemplate({ positionId: positionId });
      if (res.code == 200) {
        return res.data.templateId;
      } else {
        return 0;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
$img-base-person: $img-base + 'careerPath/';
.wrapper {
  background-image: url($img-base + 'careerPath/majorDetailBg.png');
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  padding: 0 32rpx;
  position: relative;
  .combinatorial-info {
    // margin-top: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      margin-top: 24rpx;
      .title-box {
        display: flex;
        align-items: center;
        .title {
          font-weight: bold;
          font-size: 40rpx;
          color: #222222;
        }
        .sub-title {
          font-size: 28rpx;
          color: #52586d;
          margin-left: 26rpx;
          display: flex;
          align-items: center;
          .name {
            margin-right: 16rpx;
          }
        }
      }
      .up {
        margin-top: 40rpx;
        display: flex;
        align-items: center;
        .combinatorial-name {
          margin-right: 20rpx;
        }
        .change-btn {
          display: flex;
          align-items: center;
          .edit-img {
            width: 32rpx;
            height: 32rpx;
          }
          .text {
            font-size: 26rpx;
            color: #109eeb;
            margin-left: 8rpx;
          }
        }
      }
      .down {
        margin-top: 18rpx;
        color: #555;
        font-size: 26rpx;
        .num {
          color: #f56246;
          padding: 0 8rpx;
        }
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 82rpx;
      position: relative;
      .circle-progress {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        color: #333333;
        font-family: 'AlimamaShuHeiTi-Bold';
        font-size: 26rpx;
        border: 8rpx solid #f7f7f7;
        background-color: #fff;
      }
      .progress-mask {
        position: absolute;
        width: 110rpx;
        height: 110rpx;
        background-color: #fff;
        border-radius: 50%;
        top: 4rpx;
      }
      ::v-deep .u-circle-progress {
        border-radius: 50%;
      }
      .u-progress-content {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .u-progress-info {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: bold;
        font-size: 26rpx;
        color: #333333;
      }
      .text {
        margin-top: 12rpx;
        font-size: 24rpx;
        color: #222222;
      }
    }
  }
  .second-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 58rpx;
    padding-bottom: 28rpx;
    .second-box-item,
    .active-second-box-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 332rpx;
      padding-left: 20rpx;
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
      }
      .per {
        font-weight: bold;
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
      }
    }
    .second-box-item {
      height: 122rpx;
      background: linear-gradient(180deg, #edf5ff 0%, #fcfdff 100%);
      border-radius: 12rpx;
      border: 4rpx solid #e4e8f1;
      .per {
        color: #999999;
      }
    }
    .active-second-box-item {
      height: 122rpx;
      background: linear-gradient(180deg, #ffeae8 0%, #fdfbfc 100%);
      border: 4rpx solid #f65b3c;
      border-radius: 12rpx;
      color: #f65b3c;
      position: relative;
    }
    .active-second-box-item :after,
    .active-second-box-item :before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    .active-second-box-item :after {
      border-color: rgba(19, 26, 213, 0);
      border-top-color: #fdfbfc;
      border-width: 10rpx;
      margin-left: -10rpx;
    }
    .active-second-box-item :before {
      border-color: rgba(0, 0, 0, 0);
      border-top-color: #f65b3c;
      border-width: 16rpx;
      margin-left: -16rpx;
    }
  }
}
.choose-subject {
  height: 578rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-top: 46rpx;
  padding: 24rpx;
  .choose-title {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    .left {
      height: 42rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 30rpx;
      color: #222222;
      line-height: 42rpx;
    }
    .right {
      height: 36rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      line-height: 36rpx;
      margin-left: 24rpx;
    }
  }
  .choose-box {
    margin: 28rpx 0 40rpx 0;
    display: flex;
    align-items: center;
    .choose-box-item,
    .choose-box-item-selected {
      width: 146rpx;
      height: 72rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
      font-size: 28rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    .choose-box-item {
      border: 2rpx solid #d9d9d9;
      color: #333333;
    }
    .choose-box-item-selected {
      border: 2rpx solid #f75a3e;
      color: #f75a3e;
    }
  }
  .search-btn {
    height: 80rpx;
    background: #f75a3e;
    border-radius: 8rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 30rpx;
    color: #ffffff;
  }
}
</style>
